<template>
  <div>
    <!-- <van-nav-bar title="动火方案-详情" left-text="返回" :safe-area-inset-top="true" fixed :placeholder="true" left-arrow
      @click-left="onClickLeft" /> -->
    <div class="hei10"></div>
    <van-cell-group>
      <van-field
        label="方案名称:"
        class="top1"
        type="text"
        autosize
        rows="1"
        v-model="detailData.name"
        readonly
      />
      <van-divider
        dashed
        :style="{
          color: '#1989fa',
          borderColor: '#1989fa',
          padding: '0',
          margin: '0',
        }"
      ></van-divider>
      <van-cell icon="description" :title="fileTitle" @click="downFile" />
      <van-field
        label="动火申请单位:"
        type="textarea"
        autosize
        rows="1"
        :value="detailData.hotApplyUnit"
        readonly
      />
      <van-field label="动火作业之间:" readonly>
        <template #input>
          <span
            >{{
              detailData.hotWorkStartTime | dateFormat("YYYY-MM-DD HH:mm:ss")
            }}
            至
            {{
              detailData.hotWorkEndTime | dateFormat("YYYY-MM-DD HH:mm:ss")
            }}</span
          >
        </template>
      </van-field>

      <van-field
        label="基层战场(作业区)度责人:"
        type="textarea"
        autosize
        rows="1"
        :value="detailData.workAdminUserName"
        readonly
      />
      <van-field
        label="动火作业级别:"
        type="textarea"
        autosize
        rows="1"
        :value="detailData.hotLevel"
        readonly
      />
      <van-field
        label="动火作业地点:"
        type="text"
        :value="detailData.hotPlace"
        readonly
      />
      <van-field
        label="动火作业单位监护人	:"
        type="text"
        :value="detailData.hotWorkUnitGuardian"
        readonly
      />
      <van-field
        label="动火作业单位负责人:"
        type="textarea"
        autosize
        rows="1"
        :value="detailData.hotWorkUnitAdmin"
        readonly
      />
      <van-field
        label="动火作业内容及目的:"
        type="textarea"
        autosize
        rows="1"
        :value="detailData.hotContent"
        readonly
      />
      <van-field
        label=""
        value="动火作业部位与周围油气流程及置换隔断示意图:"
        readonly
      />
      <div class="van-cell__label" style="padding: 10px 16px; background: #fff">
        <p>
          <van-image
            v-for="(item, index) in otmpImgArr"
            width="100"
            height="100"
            :src="item | imgPath"
            @click="viewImg($event, item, index)"
          />
        </p>
      </div>
      <van-field
        label="动火作业安全技术措施及现场施工组织:"
        type="textarea"
        autosize
        rows="1"
        :value="detailData.measure"
        readonly
      />
    </van-cell-group>
    <div class="hei10"></div>
    <van-collapse v-model="activeNames" @change="onChange">
      <van-collapse-item name="1" toggle>
        <template #title>
          <div>
            {{ title }}
          </div>
        </template>
        <van-steps direction="vertical" :active="detailData.nextGroup - 1">
          <van-step v-for="(item, index) in stepsList">
            <h3 v-if="index == 1">动火作业单位</h3>
            <p
              v-if="index == 1"
              v-for="(i, s) in item"
              :class="i.approvalStatus == 0 ? 'a' : 'b'"
            >
              <span>{{ i.userInfo.username }} </span>
            </p>

            <h3 v-if="index == 2">作业区域所在基层单位</h3>
            <p
              v-if="index == 2"
              v-for="(i, s) in item"
              :class="i.approvalStatus == 0 ? 'a' : 'b'"
            >
              <span>{{ i.userInfo.username }} </span>
            </p>

            <h3 v-if="index == 3">二级单位业务主管部门</h3>
            <van-radio-group
              v-model="radio"
              v-if="index == 3"
              v-for="(i, s) in item"
              :class="i.approvalStatus == 0 ? 'a' : 'b'"
            >
              <p @click="onChange1(i.id)">
                <van-radio
                  :disabled="
                    detailData.nextGroup - 1 === 2 &&
                    i.approvalStatus == 0 &&
                    i.approvalUserId == geUserId
                      ? false
                      : true
                  "
                  name="1"
                  v-if="s == 0"
                >
                  生产调度运行部门:{{ i.userInfo.username }}</van-radio
                >
              </p>
              <p @click="onChange1(i.id)">
                <van-radio
                  :disabled="
                    detailData.nextGroup - 1 === 2 &&
                    i.approvalStatus == 0 &&
                    i.approvalUserId == geUserId
                      ? false
                      : true
                  "
                  name="2"
                  v-if="s == 1"
                >
                  资产设施管理部门:{{ i.userInfo.username }}</van-radio
                >
              </p>
              <p @click="onChange1(i.id)">
                <van-radio
                  :disabled="
                    detailData.nextGroup - 1 === 2 &&
                    i.approvalStatus == 0 &&
                    i.approvalUserId == geUserId
                      ? false
                      : true
                  "
                  name="3"
                  v-if="s == 2"
                >
                  安全监管部门:{{ i.userInfo.username }}</van-radio
                >
              </p>
            </van-radio-group>

            <h3 v-if="index == 4">二级单位主管领导</h3>
            <p
              v-if="index == 4"
              v-for="(i, s) in item"
              :class="i.approvalStatus == 0 ? 'a' : 'b'"
            >
              <span>{{ i.userInfo.username }} </span>
            </p>

            <h3 v-if="index == 5">公司部门业务主管</h3>
            <van-radio-group
              v-model="radio1"
              v-if="index == 5"
              v-for="(i, s) in item"
              :class="i.approvalStatus == 0 ? 'a' : 'b'"
            >
              <p>
                <van-radio
                  :disabled="
                    detailData.nextGroup - 1 === 4 &&
                    i.approvalStatus == 0 &&
                    i.approvalUserId == geUserId
                      ? false
                      : true
                  "
                  name="1"
                  v-if="s == 0"
                >
                  生产调度运行部门:{{ i.userInfo.username }}
                </van-radio>
              </p>
              <p>
                <van-radio
                  :disabled="
                    detailData.nextGroup - 1 === 4 &&
                    i.approvalStatus == 0 &&
                    i.approvalUserId == geUserId
                      ? false
                      : true
                  "
                  name="2"
                  v-if="s == 1"
                >
                  资产设施管理部门:{{ i.userInfo.username }}</van-radio
                >
              </p>
              <p>
                <van-radio
                  :disabled="
                    detailData.nextGroup - 1 === 4 &&
                    i.approvalStatus == 0 &&
                    i.approvalUserId == geUserId
                      ? false
                      : true
                  "
                  name="3"
                  v-if="s == 2"
                >
                  安全监管部门:{{ i.userInfo.username }}</van-radio
                >
              </p>
            </van-radio-group>

            <h3 v-if="index == 6">资产设施管理部门负责人</h3>
            <p
              v-if="index == 6"
              v-for="(i, s) in item"
              :class="i.approvalStatus == 0 ? 'a' : 'b'"
            >
              <span>{{ i.userInfo.username }} </span>
            </p>
          </van-step>
        </van-steps>
      </van-collapse-item>
    </van-collapse>

    <van-field
      label="审批意见:"
      type="textarea"
      autosize
      rows="1"
      v-model="remark"
      :value="detailData.remark"
      v-if="isComfBtn && detailData.confirmStatus != 1"
      placeholder="请输入审批意见"
    />
    <div style="height: 60px; background: none"></div>
    <van-button
      class="saveBtn"
      type="primary"
      v-if="isComfBtn && detailData.confirmStatus != 1"
      @click="postProcessConfirm"
      block
      >确认</van-button
    >
  </div>
</template>

<script>
import JSbridge from "@/utils/JSbridge";
import { hotProgramCombDetail, processConfirm } from "@/api/hotplan";
import { processConfirmList } from "@/api/common";
import {
  NavBar,
  Steps,
  Step,
  Icon,
  Popup,
  Cell,
  Collapse,
  CollapseItem,
  Button,
  CellGroup,
  Field,
  Divider,
  Image as VanImage,
  ImagePreview,
  RadioGroup,
  Radio,
} from "vant";
export default {
  components: {
    [NavBar.name]: NavBar,
    [Steps.name]: Steps,
    [Step.name]: Step,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [Cell.name]: Cell,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [Button.name]: Button,
    [CellGroup.name]: CellGroup,
    [Field.name]: Field,
    [Divider.name]: Divider,
    [VanImage.name]: VanImage,
    [ImagePreview.name]: ImagePreview,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
  },
  data() {
    return {
      activeNames: ["1"],
      title: "收起流程进度",
      detailData: {},
      otmpImgArr: [],
      stepsList: [],
      isComfBtn: false,
      fileTitle: "",
      isDown: false,
      remark: "",
      radio: undefined,
      radio1: undefined,
      objId: "",
    };
  },
  computed: {
    getid() {
      return this.$route.query.id;
    },
    geUserId() {
      return this.$store.getters.userId;
    },
  },
  created() {
    this.getDetail();
  },
  methods: {
    onChange1(val) {
      this.objId = val;
    },
    postProcessConfirm() {
      if (this.remark != "") {
        let params = {
          d: {
            c: [
              {
                key: "userId",
                value: this.$store.getters.userId,
              },
              {
                key: "authToken",
                value: this.$store.getters.token,
              },
              {
                key: "entSpaceId",
                value: this.$store.getters.entSpaceId,
              },
            ],
          },
          obj: {
            approvalComments: this.remark,
            id: this.objId,
          },
        };
        processConfirm(params, this.getid).then((res) => {
          this.$toast.success("操作成功");
          JSbridge.callHandler("gotoBack", "1", (res) => {
            return res;
          });
        });
      } else {
        this.$toast.fail("请输入备注");
      }
    },
    getProcessConfirmList() {
      let params = {
        d: {
          filters: [
            {
              field: "dataId",
              operator: "EQUALS",
              value: this.getid,
            },
          ],
        },
      };
      processConfirmList(params).then((res) => {
        this.stepsList = res.result;
        let userId = this.geUserId;
        let nextGroup = this.detailData.nextGroup;
        let nextLevel = this.detailData.nextLevel;
        let otempObj = this.stepsList[nextGroup];
        console.log(this.stepsList[2]);

        for (let a in otempObj) {
          if (
            userId === otempObj[a].approvalUserId &&
            otempObj[a].approvalStatus === 0
          ) {
            this.isComfBtn = true;
            // this.radio1 = (Number(a) + 1).toString()
            // this.radio = (Number(a) + 1).toString()
            this.objId = otempObj[a].id;
          }
        }
      });
    },
    getDetail() {
      hotProgramCombDetail(this.getid).then((res) => {
        this.detailData = res.result;
        if (
          res.result.sketchMap != "" &&
          res.result.sketchMap != null &&
          res.result.sketchMap != undefined
        ) {
          let a = res.result.sketchMap.split(";");
          for (let item in a) {
            this.otmpImgArr.push(a[item]);
          }
        }
        if (
          this.detailData.fileUrl == "" ||
          this.detailData.fileUrl == undefined
        ) {
          this.fileTitle = "暂无文件";
          this.isDown = false;
        } else {
          this.fileTitle = "查看附件";
          this.isDown = true;
        }
        this.getProcessConfirmList();
      });
    },
    downFile() {
      let fileUrl =
        process.env.VUE_APP_BASE_API +
        "/welder-second/upload/" +
        this.detailData.fileUrl;
      const jsonStr = {
        url: fileUrl,
      };
      JSbridge.callHandler("goDownload", JSON.stringify(jsonStr), (res) => {
        return res;
      });
    },
    viewImg(a, b, index) {
      ImagePreview({
        images: this.otmpImgArr,
        startPosition: index,
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onChange(a) {
      if (a.length == 0) {
        this.title = "查看流程进度";
      } else if (a.length == 1) {
        this.title = "收起流程进度";
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-step--vertical.van-step--finish {
  .van-step__line {
    width: 2px;
    left: -16px;
  }
}

/deep/ .van-step--vertical.van-step--process {
  .van-step__line {
    width: 2px;
    left: -16px;
  }
}

/deep/ .van-hairline {
  padding-left: 10px;
}

/deep/ .van-step__title {
  p {
    line-height: 30px;
  }
}

/deep/ .van-nav-bar {
  z-index: 9;
}

/deep/ .van-step__icon--active {
  font-size: 20px;
}

/deep/ .van-step--finish {
  color: #07c160;
}

.saveBtn {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9;
}

.a {
  color: #969799;
}

.b {
  color: #07c160;

  /deep/ .van-radio__label--disabled {
    color: #07c160;
  }
}

/deep/ .van-radio__icon {
  font-size: 14px;
}
</style>